<!--统计图页面-->
<template>
  <el-card shadow="never" class="aui-card--fill" style="background-color: #f5f5f5;">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="3" v-for="(item,index) in statUserList" :key="index">
        <div class="flex_columns flex_jufy_center" style="background-color: #FFFFFF;padding: 20px;margin-bottom: 20px;border-radius: 5px;" v-if="item.key">
          <div style="font-size: 20px;">{{item.key}}</div>
          <div style="font-size: 36px;margin-top: 20px;">{{item.value}}</div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="4" :xl="3" v-for="(item,index) in statOrderList" :key="index">
        <div class="flex_columns flex_jufy_center" style="background-color: #FFFFFF;padding: 20px;margin-bottom: 20px;border-radius: 5px;" v-if="item.key">
          <div style="font-size: 20px;">{{item.key}}</div>
          <div style="font-size: 36px;margin-top: 20px;">{{item.value}}</div>
        </div>
      </el-col>
    </el-row>
    <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
      <div class="" id="one" style="height: 400px;background-color: #FFFFFF;padding: 20px;"></div>
    </el-col>
    <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
      <div class="" id="two" style="height: 400px;background-color: #FFFFFF;padding: 20px;"></div>
    </el-col>
    <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
      <div class="" id="three" style="height: 400px;background-color: #FFFFFF;padding: 20px;"></div>
    </el-col>
  </el-card>
</template>

<script>
import * as echarts from 'echarts';
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/api/statOrder',
        getDataListIsPage: false,
        deleteURL: '/api/shopInfo',
        createdIsNeed: false,       // 此页面是否在创建时，调用查询数据列表接口？
      },
      statUserList: [],             //查询用户相关指标
      statOrderList: [],            //查询订单相关指标
    }
  },
  components: {
  },
  created() {
  },
  mounted() {
    this.statUser()
    this.statOrder()
  },
  methods:{
    //查询用户相关指标
    statUser() {
      const myEchart3 = echarts.init(document.getElementById('three'))
      const option = {
        title: {
          text: '用户变化统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar'
          }
        ]
      }

      this.$http.get(`/api/statUser`).then(({data: res}) => {
        //console.log(res)
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.statUserList = res.data
        const createDate = res.data.createDate
        createDate.forEach(item=>{
          option.xAxis.data.push(item.key)
          const num = Number(item.value)
          option.series[0].data.push(num)
        })
        debugger
        myEchart3.setOption(option)
      }).catch(() => {})
    },
    //查询订单相关指标
    statOrder() {
      const myEchart = echarts.init(document.getElementById('one'))
      const myEchart2 = echarts.init(document.getElementById('two'))
      const option = {
        title: {
          text: '订单状态统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar'
          }
        ]
      }
      const option2 = {
        title: {
          text: '订单区域分布统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar'
          }
        ]
      }
      this.$http.get(`/api/statOrder`).then(({data: res}) => {
        //console.log(res)
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.statOrderList = res.data
        const list = res.data.orderStatus
        const receiveCity = res.data.receiveCity
        list.forEach(item=>{
          option.xAxis.data.push(item.key)
          const num = Number(item.value)
          option.series[0].data.push(num)
        })
        receiveCity.forEach(item=>{
          option2.xAxis.data.push(item.key)
          const num = Number(item.value)
          option2.series[0].data.push(num)
        })
        debugger
        myEchart.setOption(option)
        debugger
        myEchart2.setOption(option2)
      }).catch(() => {
      })
    },
  }
}
</script>
